<template>
    <div class="topic">
        <ul>
            <li v-for="item in (topicArr as any) " :key="item.id">
                <img :src="item.scene_pic_url" alt="">
                <h4>{{ item.title }}</h4>
                <p>{{ item.subtitle }}</p>
                <p>${{ item.price_info.toFixed(2) }}元起</p>
            </li>
        </ul>
        <!-- 分页 -->
        <van-pagination v-model="page" :page-count="pagecount" mode="simple" />
    </div>
</template>

<script setup lang='ts'>
import { ref, watch, watchEffect } from 'vue'
// 导入接口
import { gettopicdata } from '@/api/topic'
const page = ref(1);
const size = ref(10)
const topicArr = ref([]);
const pagecount = ref<number>(0)
// const gettopiclistFn = () => {
//     gettopicdata({
//         page: page.value,
//         size: size.value
//     }).then(res => {
//         console.log(res);
//         topicArr.value = res.data.data.data
//         pagecount.value = res.data.data.totalPages
//     })
// }
// 初始化调用
// gettopiclistFn()

// 添加事件监听 监听page 变量
// watch(page, () => {
//     console.log('page', page);
//     gettopiclistFn()
// })

// 使用watchEffect 监听page 变化 
// 初始化监听,数据改变监听
watchEffect(() => {
    gettopicdata({
        page: page.value,
        size: size.value
    }).then(res => {
        console.log(res);
        topicArr.value = res.data.data.data
        pagecount.value = res.data.data.totalPages
    })
})
</script>
<style scoped lang="scss">
.topic {
    width: 100%;
    overflow: hidden;

    ul {
        li {
            img {
                width: 100%;
            }

            text-align: center;
        }
    }

}

::v-deep .van-pagination__page-desc {
    display: none;
}
</style>